<!-- eslint-disable no-unused-vars -->
<template>
    <div class="app-container">
        <page-main>
            <filter-pane :filter-data="filterData" @filterMsg="filterMsg" />
            <table-pane :data-source="dataSource" @changeSize="changeSize" @changeNum="changeNum" />
        </page-main>
        <!-- 添加或修改积分对话框 -->
        <DialogFrom ref="DialogFrom" type="form" :visible.sync="open" :title="title" width="50%" :items="items"
                    :form="form" @submit="submitForm"
        />

        <DialogFrom ref="DialogFrom" type="form" :visible.sync="openJuese" :title="titleJuese" width="50%" :items="itemsJuese"
                    :form="formJuese" @submit="submitFormJuese"
        />
    </div>
</template>

<script>
import filterPane from '@/components/TableDialog/filterPane'
import tablePane from '@/components/TableDialog/tablePane'

// eslint-disable-next-line no-unused-vars
import { getUserList, editUser, fenpei, addUser, deleteUser, getRoleList} from '@/util/api'

export default {
    name: 'DynamicShare',
    components: { filterPane, tablePane },
    data() {
        return {
            // 搜索栏配置
            filterData: {
                timeSelect: false,
                elinput: [

                ]
            },
            multipleSelection: [],
            title: '',
            open: false,
            // 表格配置
            dataSource: {
                tool: [{
                    name: '新增',
                    key: 1,
                    permission: 2010701,
                    handleClick: this.handleAdd,
                    bgColor: ''// 自定义按钮背景色
                }, {
                    name: '修改',
                    key: 1,
                    type: 'success',
                    permission: 2010701,
                    handleClick: this.handleAdd,
                    bgColor: ''// 自定义按钮背景色
                }, {
                    name: '删除',
                    key: 1,
                    type: 'danger',
                    permission: 2010701,
                    handleClick: this.handleAdd,
                    bgColor: ''// 自定义按钮背景色
                }],
                data: [], // 表格数据
                cols: [
                    {
                        label: '用户id',
                        prop: 'id'
                        // isImagePopover: true
                    },
                    {
                        label: '用户姓名',
                        prop: 'username'
                    },
                    {
                        label: '用户手机号',
                        prop: 'mobile'
                    },
                    {
                        label: '用户邮箱',
                        prop: 'email'
                    },
                    {
                        label: '创建时间',
                        prop: 'create_time'
                    },
                    {
                        label: '用户角色名称',
                        prop: 'role_name'
                    },
                    {
                        label: '用户是否被禁用',
                        prop: 'mg_state',
                        isCodeTableFormatter: function(val) {
                            if (val.mg_state) {
                                return '否'
                            } else {
                                return '是'
                            }
                        }
                    }
                ], // 表格的列数据
                handleSelectionChange: data => {
                    console.log(data, 'xiaohe')
                    this.multipleSelection = data
                },
                isSelection: true, // 表格有多选时设置
                isOperation: true, // 表格有操作列时设置
                isIndex: true, // 列表序号
                loading: true, // loading
                pageData: {
                    total: 0, // 总条数
                    pageSize: 10, // 每页数量
                    pageNum: 1 // 页码
                },
                operation: {
                    // 表格有操作列时设置
                    label: '操作', // 列名
                    width: '100', // 根据实际情况给宽度
                    data: [ // 功能数组
                        // {
                        //     type: 'icon', // 为icon则是图标
                        //     label: '设置权限', // 功能
                        //     icon: 'iconfont recommend-btn icon-iconkuozhan_tuijianpre',
                        //     permission: '3010105', // 后期这个操作的权限，用来控制权限
                        //     handleRow: this.handleRow
                        // },
                        {
                            label: '分配角色', // 操作名称
                            type: 'danger', // 为element btn属性则是按钮
                            permission: '2010702', // 后期这个操作的权限，用来控制权限
                            handleRow: this.handleRow
                        }
                    ]
                }
            },
            // 弹窗表单参数
            form: {
                'id': '',
                'username': '',
                'mobile': '',
                'type': 1,
                'email': '',
                'create_time': '',
                'mg_state': true, // 当前用户的状态
                'role_name': ''
            },
            isAdd: true,
            openJuese: false,
            titleJuese: '分配角色',
            // 弹窗输入框配置
            itemsJuese: [
                {
                    elName: 'el-select',
                    span: 24,
                    label: '角色类型',
                    prop: 'rid',
                    options: [
                    ],
                    attrs: {
                        placeholder: '请选择角色类型',
                        multiple: false
                    },
                    on: {
                        change: e => {
                            console.log('-----------')
                            console.log(e)
                        }
                    }
                }
            ],
            formJuese: {
                rid: ''
            },
            items: [
                {
                    elName: 'el-input',
                    span: 12,
                    label: '用户名',
                    prop: 'username',
                    rules: [
                        {
                            required: true,
                            message: '请输入用户名',
                            trigger: 'blur'
                        }
                    ],
                    attrs: {
                        placeholder: '请输入用户名'
                    },
                    hidden: function() {
                        return false
                    },
                    disabled: e => {
                        console.log(e)
                        // if (this.form.checkbox == 1) {
                        return false
                        // } else {
                        //     return false
                        // }
                    },
                    on: {
                        blur: e => {
                            console.log(e)
                        }
                    }
                },
                {
                    elName: 'el-input',
                    span: 12,
                    label: '用户密码',
                    rules: [
                        {
                            required: true,
                            message: '请输入用户密码',
                            trigger: 'blur'
                        }
                    ],
                    prop: 'password',
                    attrs: {
                        placeholder: '请输入密码'
                    },
                    hidden: function() {
                        return false
                    },
                    disabled: e => {
                        console.log(e)
                        // if (this.form.checkbox == 1) {
                        return false
                        // } else {
                        //     return false
                        // }
                    },
                    on: {
                        blur: e => {
                            console.log(e)
                        }
                    }
                },
                {
                    elName: 'el-input',
                    span: 12,
                    label: '邮箱',
                    prop: 'email',
                    attrs: {
                        placeholder: '请输入邮箱'
                    },
                    hidden: function() {
                        return false
                    },
                    disabled: e => {
                        console.log(e)
                        // if (this.form.checkbox == 1) {
                        return false
                        // } else {
                        //     return false
                        // }
                    },
                    on: {
                        blur: e => {
                            console.log(e)
                        }
                    }
                },
                {
                    elName: 'el-input',
                    span: 12,
                    label: '手机号',
                    prop: 'mobile',
                    attrs: {
                        placeholder: '请输入手机号'
                    },
                    hidden: function() {
                        return false
                    },
                    disabled: e => {
                        console.log(e)
                        // if (this.form.checkbox == 1) {
                        return false
                        // } else {
                        //     return false
                        // }
                    },
                    on: {
                        blur: e => {
                            console.log(e)
                        }
                    }
                }
            ],
            Enum: {
                SQXXWH_SQPC: [],
                SQXXWH_SQLX: []
            },
            dialogAdd: false,
            msg: {}
        }
    },
    created() {
        this.getCommunityList()
        this.getList()
    },
    methods: {
        filterMsg() {

        },
        changeSize() {

        },
        changeNum() {

        },
        // 点击打开分配角色弹窗
        handleRow() {
            this.openJuese = true
        },
        // 更新接口
        async submitFormJuese() {
            const res = await fenpei(this.multipleSelection[0].id, this.formJuese)
            if (res.data.meta.status == 200) {
                this.openJuese = false
                this.$message.success('分配成功')
            }
        },
        // 获取枚举值
        getCommunityList: async function() {
            let CommunityList = []
            const res = await getRoleList()
            CommunityList = res.data.data
            this.itemsJuese.forEach(item => {
                if (item.elName === 'el-select') {
                    item.options = []
                    CommunityList.forEach(it => {
                        item.options.push({
                            label: it.roleName,
                            value: it.id
                        })
                    })
                }
            })
        },
        handleAdd(data) {
            this.title = data
            if (data === '新增') {
                this.isAdd = true
                // console.log(userInfo)
                this.open = true
                // for (let i in this.form) {
                //     this.form[i] = ''
                // }
                console.log(this.form, 'hzl')
            } else if (data === '修改') {
                this.isAdd = false
                this.open = true
                for (let i in this.form) {
                    this.form[i] = this.multipleSelection[0][i]
                }
                console.log(this.form)
            } else {
                this.$confirm('此操作将永久删除信息, 是否继续?', '提示', {
                    cancelButtonClass: 'btn-custom-cancel',
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning',
                    center: true
                })
                    .then(async() => {
                        this.deleteUser()
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        })
                    })
            }
        },
        clearData() {
            this.form = {
                'id': '',
                'username': '',
                'mobile': '',
                'type': 1,
                'email': '',
                'create_time': '',
                'mg_state': true, // 当前用户的状态
                'role_name': ''
            }
        },
        async deleteUser() {
            console.log(this.multipleSelection[0])
            let res = await deleteUser(this.multipleSelection[0].id)
            if (res.data.meta.status == 200) {
                this.getList()
                this.$message.success('删除成功')
            }
        },
        async submitForm() {
            let res = await (this.isAdd ? addUser(this.form) : editUser(this.multipleSelection[0].id, this.form))
            console.log(res)
            if (res.data.data) {
                this.$message.success(this.title + '成功')
                this.getList()
                this.clearData()
                this.open = false
            }
        },
        getList() {
            const data = {
                pagesize: this.dataSource.pageData.pageSize,
                pagenum: this.dataSource.pageData.pageNum
            }
            this.dataSource.loading = true
            getUserList(data).then(res => {
                this.dataSource.loading = false
                console.log(res, 'data')
                if (res.data.data.users.length > 0) {
                    this.dataSource.pageData.total = res.data.data.total
                    this.dataSource.data = res.data.data.users

                } else {
                    this.dataSource.data = []
                    this.dataSource.pageData.total = 0
                }
            })
        }
    }
}
</script>

<!-- <style scoped lang='scss'></style> -->
